<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="search.SearchItem.dp_name"
        placeholder="货主单位"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
        <el-input
        v-model="search.SearchItem.dp_name"
        placeholder="结算方式"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
        <el-input
        v-model="search.SearchItem.dp_name"
        placeholder="核对状态"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
        <el-input
        v-model="search.SearchItem.dp_name"
        placeholder="经办人"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
   <el-date-picker
      v-model="value1"
      type="date"
      placeholder="业务日期">
    </el-date-picker>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="搜索加载"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="业务单号" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.dp_name }}
        </template>
      </el-table-column>

      <el-table-column label="货主单位">
        <template slot-scope="scope">
          {{ scope.row.ff }}
        </template>
      </el-table-column>

      <el-table-column label="结算方式" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

      <el-table-column label="吨位(立方米)" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

     <el-table-column label="单价(元/立方米)" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

      <el-table-column label="金额(元)" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

        <el-table-column label="业务日期" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

      <el-table-column label="经办人" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

       <el-table-column label="创建时间" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

       <el-table-column label="备注" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

        <el-table-column label="核对状态" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

        <el-table-column label="核对人" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

       <el-table-column label="核对时间" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dp_createtime }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <!--修改按钮 -->
        <!-- slot-scope="{ row, $index }"   row代表数据按钮对应的行,  index代表当前行的下标-->
        <template slot-scope="{ row, $index }">
          <!-- @click="handleUpdate(row)  点击按钮执行handleUpdate方法,  row:当前行对应的数据-->
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button> 

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <!--v-show="total > 0"  总行数大于0的时候显示分页
    :total="total"  总行数绑定total字段
    :page.sync="search.page" 绑定当前页字段
    :limit.sync="search.limit" 绑定页长度
    @pagination="searchPageList"   点击分页执行的方法-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.limit"
      @pagination="searchPageList"
    />
    <!--弹出层-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!--表单定义-->
      <!-- ref="adminUserForm"   表单命名,类似于以前的id
      :rules="rules" 对应的验证规则
      :model="adminUserInfo"   表单绑定的数据模型-->
      <el-form
        ref="adminUserForm"
        :rules="rules"
        :model="adminUserInfo"
        label-position="left"
        :inline="true"
      >
        <!--el-row  代表一行-->
        <el-row>
          <!--:span="12" 代表占一半的地方-->
          <el-col :span="24">
            <!--::rules="this.dialogStatus === '1' ? rules.user_name : []"   表示添加的时候才验证用户名是否已经被占用-->
            <el-form-item
              label="货主单位"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-model="adminUserInfo.dp_name" 
                 placeholder="请输入货主单位"
              /> 
            </el-form-item> 
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="结算方式">
          <el-radio v-model="radio" label="1">微信支付</el-radio>
          <el-radio v-model="radio" label="2">支付宝支付</el-radio>
          <el-radio v-model="radio" label="3">银联支付</el-radio>
          <el-radio v-model="radio" label="4">企业转账</el-radio>
          <el-radio v-model="radio" label="5">线下支付</el-radio>
          <el-radio v-model="radio" label="6">其他</el-radio>
          </el-form-item>
        </el-row>

       <el-form-item
              label="吨位(立方米)"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-model="adminUserInfo.dp_name" 
                   placeholder="请输入吨位"
              /> 
       </el-form-item> 

       <el-form-item
              label="单位(元/立方米)"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-model="adminUserInfo.dp_name" 
                   placeholder="请输入单价"
              /> 
       </el-form-item> 

         <el-form-item
              label="金额"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-model="adminUserInfo.dp_name" 
                   placeholder="请输入金额"
              /> 
       </el-form-item> 

          <el-form-item
              label="业务日期"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
             <el-date-picker
          v-model="value1"
          type="date"
          placeholder="请输入业务日期">
    </el-date-picker>
       </el-form-item> 

          <el-form-item
              label="经办人"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-model="adminUserInfo.dp_name" 
                   placeholder="请输入经办人"
              /> 
       </el-form-item> 

        <el-form-item
              label="备注"
              prop="dp_name"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-model="adminUserInfo.dp_name" 
                   placeholder="请输入备注信息"
              /> 
       </el-form-item> 

      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addUser() : updateData()"
        >
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 引用;

import { } from "@/api/department/departmentindex"; // 引入用户操作api
import Pagination from "@/components/Pagination"; // 引入分页
import { getToken } from "@/utils/auth"; // 引入提取token的方法

export default {
  name: "AdminUserManager",
  components: { Pagination },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      search: {
        page: 1,
        limit: 10,
        OrderBy: "dp_id",
        SearchItem: {},
      },
      radio:"6",
      imageUpLoadHeaders: {
        "X-Token": getToken(), // 从cookie里获取token，并赋值  X-Token
      },
      dialogFormVisible: false, // 是否显示弹出层
      dialogTitle: "", // 弹出层标题
      dialogStatus: "1", // 等于1 表示是添加操作   不等于1 表示修改操作
      userRoleSelectLoading: false, // 角色搜索下拉框,搜索时的加载特效
      userRoleSelectOptions: [], // 角色下拉列表的选项
      downloadLoading: false, // 导出按钮加载
      adminUserInfo: {
        dp_name: "",
        dp_father_id: ""
      },
      rules: {
      },
    };
  },
  created() {
    this.searchPageList();
  },
  methods: {
    searchPageList() {
      // 搜索方法
      this.listLoading = true; // 显示加载效果
      getAdminUserPage(this.search).then((response) => {
        // 调用分页接口
        this.list = response.data.data; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.data.recordsTotal; // 赋值总行数
      });
    },
    handleFilter() {
      // 点击搜索
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    roleSearch(key) {
      // 角色搜索方法
      this.userRoleSelectLoading = true;
      const roleSearchObj = {
        page: 1,
        limit: 1000,
        OrderBy: "dp_id",
        SearchItem: { role_name: key },
      };
      getRolePage(roleSearchObj).then((response) => {
        if (response.code === 20000) {
          this.userRoleSelectLoading = false;
          this.userRoleSelectOptions = response.data.data;
        }
      });
    },
    resetUserinfo() {
      // 初始化用户对象
      this.adminUserInfo = {
        dp_name: "",
        dp_father_id: ""
      };
    },
    handleCreate() {
      // 弹出添加页面
      this.resetUserinfo();
      this.dialogStatus = "1"; // 等于1 表示是添加操作   不等于1 表示修改操作
      this.dialogTitle = "添加";
      this.dialogFormVisible = true; // 当等于true  弹出层显示
      this.$nextTick(() => {
        this.$refs["adminUserForm"].clearValidate(); // 清理验证
      });
    },
    addUser() {
      // 添加用户方法
      this.$refs["adminUserForm"].validate((valid) => {
        if (valid) {
          adminUserAdd(this.adminUserInfo).then((response) => {
            // this.list.unshift(response.data)
            //  this.total++;
            this.dialogFormVisible = false;
            this.searchPageList();
            this.$notify({
              title: "添加成功",
              message: "添加用户成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
     handleUpdate(row) {
      // 修改弹出层
      getdepartmentFantian(row.dp_id).then((r) => {
        if (r.code === 20000) {
          // this.$forceUpdate(); //vue 可能因为对象层次多不进行渲染, 调用该方法
          this.adminUserInfo = r.data // 把调用接口返回来的用户数据 赋值给adminUserInfo

          // this.adminUserInfo.roleList.map((item) => {
          //   item.label = item.role_name;
          //   item.key = item.role_id;
          //   item.value = item.role_id;

          //   // item
          //   // return {
          //   //   value: item.role_id,
          //   //   label: item.role_name,
          //   //   key: item.role_id,
          //   //   item
          //   // };
          // });
          this.adminUserInfo.user_photo_all_url =
            process.env.VUE_APP_BASE_API + this.adminUserInfo.user_photo // 拼接完整的图片路径
          this.dialogStatus = '2' // 代表是修改
          this.dialogFormVisible = true // 显示弹出层
          this.$nextTick(() => {
            this.$refs['adminUserForm'].clearValidate()
          })
          this.$forceUpdate() // vue 可能因为对象层次多不进行渲染, 调用该方法
        }
      })
      // copy obj
    },
    handleUpdate(row) {
      // 修改弹出层
      getdepartmentFantian(row.dp_id).then((r) => {
        if (r.code === 20000) {
          this.adminUserInfo = r.data; // 返回数据 赋值给adminUserInfo

          /*  this.adminUserInfo.roleList.map((item) => {
             item.label = item.role_name;
             item.key = item.role_id;
             item.value = item.role_id;     

             item
             return {
               value: item.role_id,
               label: item.role_name,
               key: item.role_id,
               item
             };
           });*/  
  
          this.dialogStatus = "2"; // 代表是修改
          this.dialogFormVisible = true; // 显示弹出层
          this.$nextTick(() => {
            this.$refs["adminUserForm"].clearValidate();
          });
          this.$forceUpdate(); // 渲染
        }
      });
      // copy obj
    },

    updateData() {
      this.$refs["adminUserForm"].validate((valid) => {
        if (valid) {
          DdepartmentUpdate(this.adminUserInfo).then((response) => {
            this.dialogFormVisible = false;
            this.searchPageList();
            this.$notify({
              title: "修改成功",    
              message: "修改用户成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },

 handleDelete(row) {
      this.$confirm("是否删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        AdminUserDelete(row.dp_id).then((r) => {
          if (r.code === 20000) {
            this.searchPageList();
          }
        });
      });
    },

  },
};
</script>
<style >
.search_input{
  width: 200px
}
</style>